<template>
	<div class="ToderInfo">
		<div class="ToderInfo-stabox" v-for="sitem,key in statusdata" :key="key" v-if="sitem.status==orderinfodata.status">
			<div class="ts-imgbox">
				<img v-if="orderinfodata.status==400||orderinfodata.status==401||orderinfodata.status==404||orderinfodata.status==800" class="ts-img" src="../assets/img/images/oinfo2_03.png" />
				<img v-else class="ts-img" src="../assets/img/images/oinfo_03.png" />
			</div>
			<div class="ts-righttext">
				<div class="tsr-sta">{{sitem.statustext}}</div>
				<p class="tsr-bottom">{{orderinfodata.notice}}</p>
			</div>
		</div>
		<div class="ToderInfo-huosebox">
			<div class="th-title" @click="detailsrouter(orderinfodata.houseId)">
				<p>{{orderinfodata.title}}</p><span class="th-title-more"></span></div>
			<div class="order-main">
				<div class="om-imgbox">
					<!--<img class="om-img" v-if="orderinfodata.houseImgUrl.indexOf('?')==-1" :src="orderinfodata.houseImgUrl+'?imageslim'" />-->
					<img class="om-img" :src="orderinfodata.houseImgUrl" />
				</div>
				<div class="om-right">
					<p>入住时段：{{jshouseStartTime[1]}}月{{jshouseStartTime[2]}}日-{{jshouseEndTime[1]}}月{{jshouseEndTime[2]}}日</p>
					<p>入住时长：{{orderinfodata.days}}晚</p>
					<p v-if="orderinfodata.houseRent==1">预定类型：{{houseRent}}</p>
					<p v-if="orderinfodata.roomRent==1">预定类型：{{roomRent}}</p>
					<p v-if="orderinfodata.bedRental==1">预定类型：{{bedRental}}</p>
				</div>
			</div>

			<div class="th-landhousebox">
				<div class="thl-item">
					<div class="thli-left">
						<span class="thli-label"><span>房</span><span>东:</span></span>
						<span class="thli-con">{{orderinfodata.nick}}</span>
					</div>

				</div>
				<div class="thl-item">
					<div class="thli-left">
						<span class="thli-label">房源地址:</span>
						<span class="thli-con" @click="amapmarker()" >{{orderinfodata.address}}</span>
					</div>
					<div class="thli-icon">
						<img src="../assets/img/images/oinfo_11.png" />
					</div>
				</div>
			</div>
		</div>
		<!--交易信息-->
		<div class="ToderInfo-Traninfobox">
			<div class="tt-title">
				交易信息
			</div>
			<div class="tt-item">
				<div class="tti-left">订 单 号</div>
				<div class="tti-right"><img class="ttir-icon" src="../assets/img/images/oinfoo.png" /><span @click="oCopy()" id="oDiv">{{orderinfodata.orderNo}}</span></div>
			</div>
			<div class="tt-item" v-if="orderinfodata.roomRent==1">
				<div class="tti-left">床位编号</div>
				<div class="tti-right">{{orderinfodata.bedsNo}}床</div>
			</div>
			<div class="tt-item" @click="PaymentDetailsGO()">
				<div class="tti-left">订单总额</div>
				<div class="tti-right"><span class="ttir-money">¥{{orderinfodata.payPrices}}</span><span class="ttir-more"></span></div>
			</div>
			<div class="tt-item">
				<div class="tti-left">退订规则</div>
				<div class="tti-right" @click="ShortRulesGO(orderinfodata.houseId)"><span class="ttir-money">请仔细阅读交易规则</span><span class="ttir-more"></span></div>
			</div>
		</div>

		<!--入住人信息-->
		<div class="ToderInfo-Checkinfobox">
			<div class="tt-title">
				入住人信息
			</div>
			<div class="tc-item" v-for="item,key in orderinfodata.userCheckInList" :key="key">

				<div class="tci-left"><img class="oinfouser" src="../assets/img/images/oinfouser_03.png" /></div>
				<div class="tci-right">
					<div class="tcir-name"><span class="tcirn">{{item.checkInName}}</span><span>{{item.checkInPhone}}</span></div>
					<div class="tcir-num">{{item.checkInIdCards}}</div>
				</div>
			</div>
		</div>
		<!--预定人信息-->
		<div class="ToderInfo-Reserveinfobox">
			<div class="tt-title">
				预定人信息
			</div>
			<div class="tr-item">
				<div class="tri-left"><span>昵    </span><span>称</span></div>
				<div class="tri-right">{{orderinfodata.contactName}}</div>
			</div>
			<div class="tr-item">
				<div class="tri-left"><span>手 </span> <span>机</span></div>
				<div class="tri-right">{{orderinfodata.contactPhone}}</div>
			</div>
		</div>

		<!--待确认-->
		<div class="order-bottom" v-if="orderinfodata.status==0">
			<div class="ob-box ob-left" @click="OrderOperafun(orderinfodata.status,orderinfodata.orderId)" style="color: #888888;">
				<div class="ob-boxicon"><img src="../assets/img/images/orderower_03.png" /></div>取消订单
			</div>
		</div>
		<!--待支付-->
		<div class="order-bottom" v-if="orderinfodata.status==2">
			<div class="ob-box ob-left" @click="OrderOperafun(orderinfodata.status,orderinfodata.orderId)">
				<div class="ob-boxicon"><img src="../assets/img/images/icon_cancellation_of_order_red.png" /></div>取消订单
			</div>
			<div class="ob-box ob-right" @click="GetAliPayInfoApi(orderinfodata.orderId)">
				<div class="ob-boxicon"><img src="../assets/img/images/icon_immediate_payment_white.png" /></div>支付
			</div>
		</div>
		<!--待入住-->
		<div class="order-bottom" v-if="orderinfodata.status==3">
			<div class="ob-box ob-left" @click="userRefund(orderinfodata.orderId)">
				<div class="ob-boxicon"><img src="../assets/img/images/icon_cancellation_of_order_red.png" /></div>取消订单
			</div>
		</div>
		<!--入住中-->
		<div class="order-bottom" v-if="orderinfodata.status==4">
			<div class="ob-box ob-left" style="color: #888888;" @click="userRefund(orderinfodata.orderId)">
				<div class="ob-boxicon"><img src="../assets/img/images/orderhuose_03.png" /></div>提前退房
			</div>
		</div>
		<!--待评价-->
		<div class="order-bottom" v-if="orderinfodata.status==5">
			<div class="ob-box ob-left" style="color: #888888;" @click="GOOrderComment(orderinfodata.orderId,orderinfodata.title,orderinfodata.houseImgUrl,orderinfodata.houseRent,orderinfodata.roomRent,orderinfodata.bedRental,orderinfodata.houseId)">
				<div class="ob-boxicon"><img src="../assets/img/images/order_evaluate.png" /></div>评价
			</div>
		</div>
		<!--已完成-->
		<div class="order-bottom" v-if="orderinfodata.status==6">
			<div class="ob-box ob-left" @click="OrderOperafun(orderinfodata.status,orderinfodata.orderId)">
				<div class="ob-boxicon"><img src="../assets/img/images/icon_delete_red_red.png" /></div>删除
			</div>

			<div class="ob-box ob-right" @click="GOTpReview()">
				<div class="ob-boxicon"><img src="../assets/img/images/order_chak.png" /></div>查看评价
			</div>
		</div>
		<!--已退房-->
		<div class="order-bottom" v-if="orderinfodata.status==600">
			<div class="ob-box ob-left" @click="OrderOperafun(orderinfodata.status,orderinfodata.orderId)">
				<div class="ob-boxicon"><img src="../assets/img/images/icon_delete_red_red.png" /></div>删除
			</div>
			<div class="ob-box ob-right" @click="GOCheckoutHouse(orderinfodata.orderId)">
				<div class="ob-boxicon"><img src="../assets/img/images/icon_check_out_white.png" /></div>查看退房
			</div>
		</div>
		<!--已取消 已失效-->
		<div class="order-bottom" v-if="orderinfodata.status==400||orderinfodata.status==401">
			<div class="ob-box ob-left" @click="OrderOperafun(orderinfodata.status,orderinfodata.orderId)">
				<div class="ob-boxicon"><img src="../assets/img/images/icon_delete_red_red.png" /></div>删除
			</div>
		</div>
		<!--已拒绝-->
		<div class="order-bottom" v-if="orderinfodata.status==404">
			<div class="ob-box ob-left" @click="OrderOperafun(orderinfodata.status,orderinfodata.orderId)">
				<div class="ob-boxicon"><img src="../assets/img/images/icon_delete_red_red.png" /></div>删除
			</div>
			<div class="ob-box ob-right" @click="openAlert">
				<div class="ob-boxicon"><img src="../assets/img/images/order_chak.png" /></div>查看原因
			</div>
		</div>
		<!--已冻结-->
		<div class="order-bottom" v-if="orderinfodata.status==800">
			<div class="ob-box ob-left" @click="OrderOperafun(orderinfodata.status,orderinfodata.orderId)">
				<div class="ob-boxicon"><img src="../assets/img/images/icon_delete_red_red.png" /></div>删除
			</div>
			<div class="ob-box ob-right" @click="gotel">
				<div class="ob-boxicon"><img src="../assets/img/images/order_phone.png" /></div>联系客服
			</div>
		</div>
		<textarea id="contents" rows="10" cols="10" style="height:0;width:0;opacity: 0;"></textarea>
	</div>
</template>

<script>
	import { mapGetters, mapActions } from 'vuex'
	import api from '../fetch/api'
	export default {
		name: "ToderInfo",
		data() {
			var that = this;
			return {
				orderId: that.$route.query.orderId,
				userType:that.$route.query.userType,
				mySessionUserinfo: JSON.parse(sessionStorage.getItem("userinfo")),
				jshouseStartTime: [],
				jshouseEndTime: [],
				ordermsg: "",
				orderower: '你是否要取消订单申请，取消后如果所选日期被出租，将无法再次预定，确认是否取消',
				orderclose: "订单删除后将无法恢复，确认是否删除？",
				statusdata: [{
						status: 0,
						statustext: "待确认"
					}, {
						status: 1,
						statustext: "申请中"
					}, {
						status: 2,
						statustext: "待支付"
					}, {
						status: 3,
						statustext: "待入住"
					}, {
						status: 4,
						statustext: "入住中"
					}, {
						status: 5,
						statustext: "待评价"
					}, {
						status: 6,
						statustext: "已完成"
					}, {
						status: 400,
						statustext: "已失效"
					}, {
						status: 401,
						statustext: "已取消"
					}, {
						status: 404,
						statustext: "已拒绝"
					}, {
						status: 600,
						statustext: "已退房"
					}, {
						status: 800,
						statustext: "已冻结"
					},

				]
			}
		},
		mounted() {
			var that = this;
			if(sessionStorage.getItem("userinfo") != null) {
				let getHiss = JSON.parse(sessionStorage.getItem("userinfo"));
				that.userId = getHiss.id,
					that.token = getHiss.token,

					that.orderinfo();
			} else {
				that.$router.push({
					path: "/login"
				})
			}
		},

		computed: {
			...mapGetters([
				'orderinfodata',
				'source',
				'houseRent',
				'roomRent',
				'bedRental'
			])
		},
		methods: {
			...mapActions({
				setToderInfo: 'setToderInfo',
				setAlipayInfo: 'setAlipayInfo'
			}),
			gotel() {
				this.$dialog.confirm({
					title: '联系客服',
					mes: "023-88256950",
					opts: () => {
						window.location = "tel:023-88256950"
					}
				});
			},
			oCopy(e) {
				var e = document.getElementById("contents"); //获取textarea的id  
				e.value = document.getElementById("oDiv").innerText; //把标签的文本内容赋值给textarea  
				e.select(); //选择textarea的文本内容  
				document.execCommand("Copy"); //执行浏览器复制命令  
				this.$dialog.toast({
					mes: '复制成功',
					timeout: 1000
				})
			},
			openAlert() {
				this.$dialog.alert({
					mes: this.orderinfodata.reason
				});
			},
			GOCheckoutHouse(orderId) {
				this.$router.push({
					path: "/CheckoutHouse",
					query: {
						orderId: orderId,
						refundId: this.orderinfodata.refundId,
						houseId: this.orderinfodata.houseId
					}
				})
			},
			GOTpReview() {
				this.$router.push({
					path: "/TpReview"
				})
			},
			GOOrderComment(orderId, title, houseImgUrl, houseRent, roomRent, bedRental, houseId) {
				this.$router.push({
					path: "/OrderComment",
					query: {
						orderId: orderId,
						houseId: houseId,
						title: title,
						houseImgUrl: houseImgUrl,
						houseRent: houseRent,
						roomRent: roomRent,
						bedRental: bedRental,
					}
				})
			},
			userRefund(orderId) {
				this.$router.push({
					path: "/UserRefund",
					query: {
						orderId: orderId
					}
				})
			},
			GetAliPayInfoApi(orderId) {
				let ajaxSign = {
					source: this.source, // string 是 ios
					token: this.mySessionUserinfo.token, // string 是 72386 c4045cc2f9b5a4d7e04e6e7a273
					orderId: orderId.toString(), // string 是 订单Id
				}
				let ajaxData = api.getAES(ajaxSign);
				api.GetAliPayInfo(ajaxData)
					.then(res => {
						let result = res.result.content;
						this.setAlipayInfo(res.result.content);
						this.$router.push({
							path: "/AliWapPay",
							query: {
								orderId: orderId
							}
						})
					})
			},
			OrderOperafun(sta, orderId) {
				let ajaxSign = {
					source: this.source, //string	是			
					token: this.mySessionUserinfo.token, //string	是			
					userId: this.mySessionUserinfo.id.toString(), //string	是			
					orderId: orderId.toString(), //string	是			
					type: '0', //string	是	1取消预约2取消支付3删除(见详细说明)
				}
				if(sta == 0) {

					ajaxSign.type = '1';
					this.ordermsg = this.orderower;
				}
				if(sta == 1 || sta == 2) {
					ajaxSign.type = '2';
					this.ordermsg = "取消订单后，如所选日期被出租，您将无法再次申请预订，确定是否取消？";
				}
				if(sta >= 5) {
					ajaxSign.type = '3';
					this.ordermsg = "订单删除后将无法恢复，确认是否删除？";
					//		this.ordermsg = this.orderclose;
				}
				this.$dialog.confirm({
					title: '提示',
					mes: this.ordermsg,
					opts: () => {
						let ajaxData = api.getAES(ajaxSign);
						api.GetOrderUser(ajaxData)
							.then(res => {
								this.$dialog.toast({
									mes: res.msg,
									timeout: 1000
								})
								if(res.sta == 200) {
									this.$router.go(-1);
									this.$parent.orderListshortdata = [];
									this.$emit('orderListshort', this.order_type, this.page);
								}
							})
					}
				});
			},
			//			详情路由跳转
			detailsrouter(houseId) {
				var that = this;

				that.$router.push({
					path: '/shortDetails',
					query: {
						houseId: houseId.toString()
					}
				})
			},
			PaymentDetailsGO() {
				var that = this;
				that.$router.push({
					path: "/PaymentDetails",
					query: {

					}
				})
			},
			ShortRulesGO(houseId) {
				var that = this;
				that.$router.push({
					path: "/ShortRules",
					query: {
						houseId: houseId
					}
				})
			},
			orderinfo() {
				var that = this;
				
				var ajaxSign = {
					"userId": that.userId.toString(),
					"token": that.token,
					"source": that.source,
					"orderId": that.orderId.toString(),
					"type": that.userType,
				};
				let ajaxData = api.getAES(ajaxSign);
				api.GetOrderInfo(ajaxData)
					.then(res => {
						if(res.sta == 203) {
							that.$router.push({
								path: "/login"
							})
						}
//						if(res.sta == 400) {
//							that.$router.go(-1)
//						}
						let ajaxdata = res.result;
						this.setToderInfo(ajaxdata)

						let sRDate = new Date(ajaxdata.houseStartTime);
						let eRDate = new Date(ajaxdata.houseEndTime);
						let tiemdate = eRDate - sRDate;
						let days = Math.floor(tiemdate / (24 * 3600 * 1000))
						ajaxdata["days"] = days;
						that.jshouseStartTime = ajaxdata.houseStartTime.split("-")
						that.jshouseEndTime = ajaxdata.houseEndTime.split("-")
					})
			}
		}
	}
</script>

<style>
	.ToderInfo {
		width: 100%;
		color: #282828;
		background: #f5f5f5;
		padding-bottom: .95rem;
		box-sizing: border-box;
	}
	
	.ToderInfo-stabox {
		width: 100%;
		height: 1.65rem;
		background: #fff;
		display: flex;
		align-items: center;
	}
	
	.ts-imgbox {
		width: 1.125rem;
		text-align: center;
	}
	
	.ts-img {
		display: block;
		width: .58rem;
		height: .53rem;
		margin: auto;
	}
	
	.tsr-sta {
		font-size: .35rem;
		line-height: .35rem;
		color: #e25051;
	}
	
	.tsr-bottom {
		font-size: .26rem;
		line-height: .26rem;
		margin-top: .26rem;
	}
	
	.ToderInfo-huosebox {
		width: 100%;
		background: #fff;
		margin-top: .21rem;
	}
	
	.th-title {
		font-size: .33rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: .31rem .24rem;
		box-sizing: border-box;
		border-bottom: 1px solid #eeecec;
	}
	
	.th-title>p {
		line-height: .33rem;
		width: 5.9rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap
	}
	
	.th-title-more {
		display: block;
		display: block;
		width: .28rem;
		height: .28rem;
		border: 1px solid #a4a4a4;
		border-bottom: none;
		border-left: none;
		transform: rotate(45deg);
	}
	
	.order-main {
		display: flex;
		padding: .44rem 0;
		box-sizing: border-box;
		border-bottom: 1px solid #eeecec;
		padding: .44rem .33rem;
		box-sizing: border-box;
	}
	
	.om-imgbox {
		width: 2.15rem;
		height: 1.42rem;
		overflow: hidden;
	}
	
	.om-img {
		display: block;
		max-width: 100%;
		min-height: 100%;
	}
	
	.om-right {
		width: 4.27rem;
		margin-left: .42rem;
		line-height: .28rem;
		position: relative;
		font-size: .26rem;
	}
	
	.om-right>p {
		width: 100%;
		margin-bottom: .3rem;
	}
	
	.om-right>p:last-child {
		margin-bottom: 0;
	}
	
	.th-landhousebox {
		width: 100%;
	}
	
	.thl-item {
		padding: .49rem .24rem;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #eeecec;
	}
	
	.thli-left {
		font-size: .31rem;
		line-height: .31rem;
		display: flex;
	}
	
	.thli-left span {}
	
	.thli-label {
		width: 1.35rem;
		display: flex;
		justify-content: space-between;
		color: #747474;
		line-height: .42rem;
	}
	
	.thli-con {
		width: 4.1rem;
		padding-left: .2rem;
		box-sizing: border-box;
		line-height: .42rem;
	}
	
	.thli-icon {
		width: .42rem;
		height: .38rem;
	}
	
	.thli-icon>img {
		display: block;
		max-width: 100%;
		min-height: 100%;
	}
	/*交易信息*/
	
	.ToderInfo-Traninfobox {
		width: 100%;
	}
	
	.tt-title {
		color: #a5a5a5;
		font-size: .33rem;
		line-height: .33rem;
		background: #F5F5F5;
		text-align: center;
		padding: .33rem 0;
		box-sizing: border-box;
	}
	
	.tt-item {
		width: 100%;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #EEECEC;
		padding: .45rem .24rem;
		box-sizing: border-box;
		background: #fff;
	}
	
	.tti-left {
		width: 1.3rem;
		font-size: .32rem;
		color: #747474;
		display: flex;
		justify-content: space-between;
	}
	
	.tti-right {
		font-size: .31rem;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	
	.ttir-icon {
		width: .33rem;
		height: .36rem;
		margin-right: .1rem;
	}
	
	.ttir-money {
		color: #e25051;
		display: block;
	}
	
	.ttir-more {
		display: block;
		width: .23rem;
		height: .23rem;
		border: 1px solid #bcbcbc;
		border-bottom: none;
		border-left: none;
		transform: rotate(45deg);
	}
	/*入住人信息*/
	
	.ToderInfo-Checkinfobox {
		width: 100%;
	}
	
	.tc-item {
		background: #fff;
		display: flex;
		font-size: .32rem;
		line-height: .32rem;
		padding: .34rem .24rem;
		border-bottom: 1px solid #EEECEC;
		box-sizing: border-box;
	}
	
	.tci-right {
		margin-left: .34rem;
	}
	
	.oinfouser {
		display: block;
		width: .82rem;
		height: .82rem;
		border-radius: 50%;
	}
	
	.tcir-num {
		margin-top: .33rem;
	}
	
	.tcirn {
		margin-right: .55rem;
	}
	/*预定人信息*/
	
	.tr-item {
		display: flex;
		background: #fff;
		justify-content: space-between;
		padding: .47rem .24rem;
		border-bottom: 1px solid #EEECEC;
		box-sizing: border-box;
		font-size: .32rem;
		line-height: .32rem;
	}
	
	.tri-left {
		width: 1.3rem;
		display: flex;
		justify-content: space-between;
	}
	
	.ToderInfo-colsebtnbox {
		width: 100%;
		height: 1.01rem;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #e25051;
		color: #fff;
		font-size: .35rem;
	}
	
	.tcb-img {
		display: block;
		width: .31rem;
		height: .35rem;
		margin-right: .14rem;
	}
	
	.ToderInfo .order-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		font-size: .35rem;
		width: 100%;
		height: .94rem;
		color: #7a7a7a;
		display: flex;
		justify-content: center;
		align-items: center;
		border-top: .01rem solid #EEECEC;
	}
	
	.ToderInfo .ob-box {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: auto;
		line-height: .28rem;
	}
	
	.ToderInfo .ob-boxicon {
		width: .35rem;
		height: .35rem;
		margin-right: .17rem;
	}
	
	.ToderInfo .ob-boxicon>img {
		display: block;
		width: .35rem;
		height: .35rem;
	}
	
	.ToderInfo .ob-left {
		background: #fff;
		color: #E25051;
	}
	
	.ToderInfo .ob-right {
		background: #E25051;
		color: #fff;
	}
</style>